<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--tabs-->
      <el-tabs v-model="activeName"
               @tab-click="getDormArea"
               type="card">
        <el-tab-pane label="桃园"
                     name="taoyuan">
          <el-tabs v-model="activeNameItem"
                   @tab-click="getDormLeader">
            <el-tab-pane :label="item.towerName"
                         v-for="item in taoyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--展开内容table-->
              <el-table :data="tableData"
                        style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left"
                             inline
                             class="demo-table-expand">
                      <el-form-item label="宿舍号：">
                        <span class="span">{{ props.row.dorm }}</span>
                        <dormStudents :dormInfo="props.row"
                                      ref="dormStudentRef"
                                      @click.native="getCurrDormStudents"
                                      class="dormStudents"></dormStudents>
                      </el-form-item>
                      <el-form-item label="宿舍长：">
                        <span class="span">{{ props.row.dormLeader }}</span>
                        <el-button type="success"
                                   size="mini"
                                   @click="changeDormLeader(props.row)">修改宿舍长</el-button>
                      </el-form-item>
                      <el-form-item label="班级：">
                        <span class="span">{{ props.row.class }}</span>
                      </el-form-item>
                      <el-form-item label="学号：">
                        <span class="span">{{ props.row.studentNumber }}</span>
                      </el-form-item>
                      <el-form-item label="床位空余：">
                        <span class="span spancolor">&emsp; &emsp; {{ props.row.spare }}&emsp; &emsp; </span>
                        <el-button type="success"
                                   size="mini"
                                   @click="changeDormBed(props.row)">修改宿舍默认容量</el-button>
                      </el-form-item>
                      <el-form-item label="宿舍评分：">
                        <el-rate disabled
                                 v-model="props.row.score"
                                 show-score
                                 text-color="#ff9900"
                                 score-template="{value}">
                        </el-rate>
                        <inpection class="inpection"
                                   :dormInfo="props.row"></inpection>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column label="宿舍号"
                                 prop="dorm">
                </el-table-column>
                <el-table-column label="宿舍长"
                                 prop="dormLeader">
                </el-table-column>
                <el-table-column label="床位空余："
                                 prop="spare">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="兰园"
                     name="lanyuan">
          <el-tabs v-model="activeNameItem"
                   @tab-click="getDormLeader">
            <el-tab-pane :label="item.towerName"
                         v-for="item in lanyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--内容table-->
              <el-table :data="tableData"
                        style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left"
                             inline
                             class="demo-table-expand">
                      <el-form-item label="宿舍号：">
                        <span class="span">{{ props.row.dorm }}</span>
                        <dormStudents :dormInfo="props.row"
                                      ref="dormStudentRef"
                                      @click.native="getCurrDormStudents"
                                      class="dormStudents"></dormStudents>
                      </el-form-item>
                      <el-form-item label="宿舍长：">
                        <span class="span">{{ props.row.dormLeader }}</span>
                        <el-button type="success"
                                   size="mini"
                                   @click="changeDormLeader(props.row)">修改宿舍长</el-button>
                      </el-form-item>
                      <el-form-item label="班级：">
                        <span class="span">{{ props.row.class }}</span>
                      </el-form-item>
                      <el-form-item label="学号：">
                        <span class="span">{{ props.row.studentNumber }}</span>
                      </el-form-item>
                      <el-form-item label="床位空余：">
                        <span class="span spancolor ">&emsp; &emsp; {{ props.row.spare }}&emsp; &emsp; </span>
                        <el-button type="success"
                                   size="mini">修改宿舍默认容量</el-button>
                      </el-form-item>
                      <el-form-item label="宿舍评分：">
                        <el-rate disabled
                                 v-model="props.row.score"
                                 show-score
                                 text-color="#ff9900"
                                 score-template="{value}">
                        </el-rate>
                        <inpection class="inpection"
                                   :dormInfo="props.row"></inpection>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column label="宿舍号"
                                 prop="dorm">
                </el-table-column>
                <el-table-column label="宿舍长"
                                 prop="dormLeader">
                </el-table-column>
                <el-table-column label="床位空余："
                                 prop="spare">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="荔园"
                     name="liyuan">
          <el-tabs v-model="activeNameItem"
                   @tab-click="getDormLeader">
            <el-tab-pane :label="item.towerName"
                         v-for="item in liyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--内容table-->
              <el-table :data="tableData"
                        style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left"
                             inline
                             class="demo-table-expand">
                      <el-form-item label="宿舍号：">
                        <span class="span">{{ props.row.dorm }}</span>
                        <dormStudents :dormInfo="props.row"
                                      ref="dormStudentRef"
                                      @click.native="getCurrDormStudents"
                                      class="dormStudents"></dormStudents>
                      </el-form-item>
                      <el-form-item label="宿舍长：">
                        <span class="span">{{ props.row.dormLeader }}</span>
                        <el-button type="success"
                                   size="mini"
                                   @click="changeDormLeader(props.row)">修改宿舍长</el-button>
                      </el-form-item>
                      <el-form-item label="班级：">
                        <span class="span">{{ props.row.class }}</span>
                      </el-form-item>
                      <el-form-item label="学号：">
                        <span class="span">{{ props.row.studentNumber }}</span>
                      </el-form-item>
                      <el-form-item label="床位空余：">
                        <span class="span spancolor ">&emsp; &emsp; {{ props.row.spare }}&emsp; &emsp; </span>
                        <el-button type="success"
                                   size="mini">修改宿舍默认容量</el-button>
                      </el-form-item>
                      <el-form-item label="宿舍评分：">
                        <el-rate disabled
                                 v-model="props.row.score"
                                 show-score
                                 text-color="#ff9900"
                                 score-template="{value}">
                        </el-rate>
                        <inpection class="inpection"
                                   :dormInfo="props.row"></inpection>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column label="宿舍号"
                                 prop="dorm">
                </el-table-column>
                <el-table-column label="宿舍长"
                                 prop="dormLeader">
                </el-table-column>
                <el-table-column label="床位空余："
                                 prop="spare">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
      <el-pagination background
                     @current-change="pagenumChange"
                     layout="prev, pager, next"
                     :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { dormInfoMixin } from 'commonjs/dormInfoMixin.js'
// import inpection from './children/inspector.vue'
// import dormStudents from 'components/component/dormStudents.vue'
export default {
  name: 'DormInfo',
  props: [''],
  data () {
    return {
      // 桃园号数
      taoyuan: [
        {
          towerId: 't1',
          towerName: '桃园1'
        }, {
          towerId: 't2',
          towerName: '桃园2'
        }, {
          towerId: 't3',
          towerName: '桃园3'
        }, {
          towerId: 't4',
          towerName: '桃园4'
        }, {
          towerId: 't5',
          towerName: '桃园5'
        }, {
          towerId: 't6',
          towerName: '桃园6'
        }
      ],
      lanyuan: [
        {
          towerId: 'l1',
          towerName: '兰园1'
        }, {
          towerId: 'l2',
          towerName: '兰园2'
        }, {
          towerId: 'l3',
          towerName: '兰园3'
        }, {
          towerId: 'l4',
          towerName: '兰园4'
        }, {
          towerId: 'l5',
          towerName: '兰园5'
        }, {
          towerId: 'l6',
          towerName: '兰园6'
        }
      ],
      liyuan: [
        {
          towerId: 'li1',
          towerName: '荔园1'
        }, {
          towerId: 'li2',
          towerName: '荔园2'
        }, {
          towerId: 'li3',
          towerName: '荔园3'
        }, {
          towerId: 'li4',
          towerName: '荔园4'
        }, {
          towerId: 'li5',
          towerName: '荔园5'
        }, {
          towerId: 'li6',
          towerName: '荔园6'
        }
      ],
      activeName: 'taoyuan',
      activeNameItem: '桃园1'
    }
  },
  // components: {
  //   inpection,
  //   dormStudents
  // },
  created () {
    this.getDormLeader('桃园1', null)
  },
  methods: {
    // 选择宿舍楼区域
    getDormArea (areaName) {
      let activename = ''
      // console.log(areaName.label)
      if (areaName.label === '桃园') {
        activename = 'taoyuan'
      } else if (areaName.label === '兰园') {
        activename = 'lanyuan'
      } else {
        activename = 'liyuan'
      }
      this.activeName = activename
      this.activeNameItem = areaName.label + '1'
      this.getDormLeader(areaName.label + '1')
    }

  },
  mixins: [dormInfoMixin]

}

</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.span {
  font-size: 15px;
}
.el-rate {
  margin-top: 12px;
}
.spancolor {
  color: red;
}
.el-form-item .el-button {
  margin-left: 100px;
}
.inpection,
.dormStudents {
  position: absolute;
  left: 170%;
  top: 0;
}
</style>
